<template>
  <div class="container">
    <!-- 使用 TimelineComponent 组件，并传递 timelineItems 属性 -->
    <TimelineComponent :timelineItems="myTimelineItems"/>
  </div>
</template>

<script>
import request from "@/request/request";
import TimelineComponent from "@/components/TimelineComponent"; // 导入时间线组件

export default {
  data() {
    return {
      myTimelineItems: []
    };
  },
  components: {
    TimelineComponent
  }
  ,
  methods: {},
  created() {

    const instanceId = this.$route.query.id; // 替换为实际的 instanceId 值

    request.get("/approveInfo/approvalProcess", {
      params: {
        instanceId: instanceId
      }
    })
        .then((response) => {
          if (response.code === 200) {
            console.log(response.data)
            this.myTimelineItems = response.data.map((item, index) => {
              let info = null;
              if ((item.approveType === '2' && item.action !== '1') || item.action === '3' || item.action === '4' || item.action === '5') {
                item.approverVoList.filter(e => e.approvedCode === item.actualApprover).map(approver => {
                  info = `${approver.approvedName}: ${approver.opinion}` + '   ' + approver.updateTime;
                });

              } else if (item.action !== null) {
                info = item.approverVoList.map(approver => {
                  if (approver.status === '1') {
                    return `${approver.approvedName}: 待审批`;
                  }
                  return `${approver.approvedName}: ${approver.opinion}` + '   ' + approver.updateTime;
                }).join("<br/>");
              }

              let color;

              switch (item.action) {
                case '0':
                  color = "#0000FF"; // 流程发起 - 蓝色
                  break;
                case '1':
                  color = "#808080"; // 默认值无意义 - 灰色
                  break;
                case '2':
                  color = "#008000"; // 审批通过 - 绿色
                  break;
                case '3':
                  color = "#FF0000"; // 退回上一节点 - 红色
                  break;
                case '4':
                  color = "#FF0000"; // 退回申请人节点 - 红色
                  break;
                case '5':
                  color = "#808080"; // 路由任意节点 - 灰色
                  break;
                case '6':
                  color = "#F08080"; // 发起人撤回 - 灰色
                  break;
                case '7':
                  color = "#FF0000"; // 发起人作废通过 - 红色
                  break;
                default:
                  color = "#000000"; // 默认颜色 - 黑色
                  break;
              }

              let content = item.nodeName;
              if (item.nodeCode !== 'APPLY' && item.nodeCode !== '-1') {
                if (item.approveType === '1') {
                  content += "(会签)";
                } else {
                  content += "(或签)";
                }
              }


              return {
                id: index,
                content: content,
                timestamp: item.updateTime,
                color: color,
                info: info,
              };
            });
          }


        });
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
  padding: 50px;
  border-radius: 5px;
  margin-bottom: 30px;
}
</style>
